<template>
  <el-card>
    <h2 class="titleHeader">留言管理</h2>
    <!-- 留言板图片 -->
    <MessageUpload></MessageUpload>
    <!-- 留言列表 -->
    <el-divider />
    <header>
      <ClearBtn @click="hanleClearSelect">清空选中</ClearBtn>
      <div>
        <el-input placeholder="搜索留言消息" class="iptSearch" v-model="message" clearable>
        </el-input>
        <el-input placeholder="搜索邮箱" class="iptSearch" v-model="email" clearable>
        </el-input>
        <el-input placeholder="搜索用户名" class="iptSearch" v-model="username" clearable>
        </el-input>
        <el-button :icon="Search" type="primary" @click="getMessageData">搜索</el-button>
      </div>
    </header>

    <!-- 提示框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>确定要删除选中</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消 </el-button>
          <el-button type="primary" @click="handleDeleteAll"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <MessageList :MessageListData="MessageListData" @deleteId="deleteId" ref="messageListRef"></MessageList>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @current-change="handleChangePage" :hide-on-single-page="Number(count) < 5" :total="Number(count)"
        :page-size="5" layout="prev, pager, next" />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue';
import { getMessage, delMessage } from '@/utils/messageHttp'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
const MessageUpload = defineAsyncComponent(() => import('@/components/messgae/MessageUpload.vue'))
const MessageList = defineAsyncComponent(() => import('@/components/messgae/MessageList.vue'))
const ClearBtn = defineAsyncComponent(() => import('@/components/button/ClearBtn.vue'))
const messageListRef = ref<InstanceType<typeof MessageList>>()
// 数据
type messageType = {
  createTime?: string
  message?: string
  email?: string
  username?: string
  _id?: string
}
const MessageListData = ref<messageType[]>([])
// 搜索框值
const username = ref<string>('')
const message = ref<string>('')
const email = ref<string>('')
const dialogVisible = ref<boolean>(false)
// 获取值
let page = 1
const count = ref<number>(0)
const getMessageData = async () => {
  let { data: { inof } } = await getMessage(page, message.value, email.value, username.value)
  count.value = inof.count
  MessageListData.value = inof.data
}
getMessageData()
// 删除提示框
const hanleClearSelect = function () {
  dialogVisible.value = true
}
// 分页切换
const handleChangePage = (currentpage: number): void => {
  page = currentpage
  getMessageData()
}
// 删除
const deleteId = async (ids: string[]) => {
  if (!ids.length) return ElMessage.error('不能一个不选')
  let { data } = await delMessage(ids)
  data.data.deletedCount ? ElMessage.success(`删除${data.data.deletedCount}条数据`) : ElMessage.error('删除失败')
  getMessageData()
}

// 删除多个
const handleDeleteAll = function () {
  dialogVisible.value = false
  messageListRef.value &&
    deleteId(messageListRef.value.multipleSelection.map(item => item._id) as string[]);

}

</script>


<style lang="scss" scoped>
header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-width: 700px;
  margin-top: 20px;

  :deep(.iptSearch) {
    width: 160px;
    margin-right: 15px;
  }

  .reportSelect {
    width: 100px;
    margin-right: 8px;
  }

}

.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>